<template>
    <div class="page-content">
        <!-- banner -->
        <div class="banner-content">
          <div class="banner-title-box">
            <h1 class="banner-title">ABOUT<span>.</span><span>US</span></h1>
            <div class="banner-stitle">关于我们</div>
          </div>
          <div class="banner-detail">
            关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们
            关于我们关于我们关于我们关于我们
          </div>
        </div>
        <!-- banner end -->

        <!-- 企业概况 -->
        <div class="content-items-box">
          <div class="content-center-box">
            <div class="box-title">
              <h2>企业概况</h2>
              <div class="e-title">Summary</div>
            </div>
            <div class="content-center-detail">
              <div class="detail-img"><img src="@/assets/about/detail-img.png" alt="detail-img"></div>
              <div class="detail-content">
                <h2 class="detail-title"><span>BM</span>S Union</h2>
                <div class="detail-text">
                  <p>
                  关于我们关于我们关于我们关于我们关于我们关于
                  我们关于我们关于我们关于我们关于我们关于我们
                  关于我们关于我们关于我们关于我们关于我们关于
                  我们关于我们关于我们关于我们关于我们关于我们
                  关于我们关于我们关于我们关于我们关于我们。
                  </p>
                  <p>
                    关于我们关于我们关于我们关于我们关于我们关于
                    我们关于我们关于我们关于我们关于我们关于我们
                    关于我们关于我们关于我们关于我们关于我们关于
                    我们关于我们关于我们关于我们关于我们关于我们
                    关于我们关于我们关于我们关于我们关于我们。
                  </p>
                </div>
                <div class="detail-btn">立即体验</div>
                <img class="quotes-img img-top" src="@/assets/about/quotes-a.png" alt="quotes-a">
                <img class="quotes-img img-bottom" src="@/assets/about/quotes-b.png" alt="quotes-b">
              </div>
            </div>
          </div>
        </div>
        <!-- 企业概况 end -->

        <!-- 企业文化 -->
        <div class="content-items-box enterprise-culture">
          <div class="product-center-box">
            <div class="box-title">
              <h2>企业文化</h2>
              <div class="e-title">Culture</div>
            </div>
            <div class="items-detail-content">
              <div class="items-box">
                <div class="box-top">icon</div>
                <div class="box-bottom">
                  <p>企业使命</p>
                  <p>企业使命企业使命企业使命企业使命</p>
                </div>
              </div>
              <div class="items-box">
                <div class="box-top">icon</div>
                <div class="box-bottom">
                  <p>企业愿景</p>
                  <p>企业愿景企业愿景企业愿景企业愿景</p>
                </div>
              </div>
              <div class="items-box">
                <div class="box-top">icon</div>
                <div class="box-bottom">
                  <p>产品理念</p>
                  <p>产品理念产品理念产品理念产品理念产品理念</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 联系我们 -->
          <div class="contact-us">
            <div class="contact-title">准备开始了吗？</div>
            <div class="contact-stitle">创建账户或联系我们</div>
            <div class="contact-btn-box">
              <span class="contact-btn active">创建账户</span>
              <span class="contact-btn">联系我们</span>
            </div>
          </div>
          <!-- 联系我们 end -->
        </div>
        <!-- 企业文化 end-->
    </div>
</template>

<script>
  export default {
    name: 'About'
  }
</script>

<style type="text/less" lang="less" scoped>
.banner-content{
  height: 750px;
  width: 100%;
  color: #ffffff;
  background-image: url("../../assets/about/banner-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 1380px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  .banner-title-box{
    text-align: center;
    margin-bottom: 40px;
    .banner-title{
      font-size: 50px;
      color: #ffffff;
      margin: 0;
      span:first-child{
        color: #FCAA23;
        font-size: 30px;
        margin-left: 10px;
        margin-right: 6px;
      }
      span:last-child{
        font-size: 24px;
      }
    }
    .banner-stitle{
      font-size: 20px;
    }
  }
  .banner-detail{
    width: 830px;
    text-align: center;
    font-size: 20px;
  }
}
.content-items-box{
  .box-title{
    text-align: center;
    margin-top: 140px;
    margin-bottom: 130px;
    h2{
      font-size: 28px;
      color: #333333;
      font-weight: 400;
    }
    .e-title{
      font-size: 12px;
      letter-spacing: 7px;
      color: #0191FF;
    }
  }
  .content-center-detail{
    display: flex;
    width: 1380px;
    margin: 0 auto;
    padding-bottom: 100px;
    padding-right: 40px;
    .detail-content{
      position: relative;
      width: 464px;
      height: 570px;
      margin-left: 180px;
      padding: 50px 45px 30px 50px;
      box-shadow:0px 0px 18px 0px rgba(0, 0, 0, 0.1);
      .detail-title{
        font-size: 26px;
        color: #333333;
        padding-bottom: 25px;
        span{
          border-bottom: 3px solid #FCAA23;
          padding-bottom: 5px;
        }
      }
      .detail-text{
        font-size: 16px;
        color: #666666;
        line-height: 28px;
        margin-bottom: 35px;
      }
      .detail-btn{
        display: inline-block;
        color: #ffffff;
        font-size: 14px;
        cursor: pointer;
        background:linear-gradient(-90deg,rgba(100,107,255,1) 32%,rgba(4,147,255,1) 100%);
        border-radius:18px;
        padding: 8px 20px;
      }
      .quotes-img{
        position: absolute;
        &.img-top{
          top: -25px;
          left: -41px;
        }
        &.img-bottom{
          bottom: -24px;
          right: -42px;
        }
      }
    }
  }
  &.enterprise-culture {
    background-image: url("../../assets/about/culture-bg.png");
    background-repeat: no-repeat;
    background-position: 0 25px;
    .box-title{
      margin: 100px 0 80px 0;
    }
    /*height: 1100px;*/
    padding-bottom: 240px;
    width: 100%;
    min-width: 1380px;
    .product-center-box{
      width: 1380px;
      margin: 0 auto;
    }
    .items-detail-content{
      display: flex;
      justify-content: space-between;
      padding: 0 55px;
      .items-box{
        width: 353px;
        /*height: 445px;*/
        min-height: 370px;
        background-color: #ffffff;
        margin-right: 50px;
        box-shadow:0px 0px 18px 0px rgba(0, 0, 0, 0.1);
        &:last-child{
          margin-right: 0;
        }
        .box-top{
          height: 60%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          padding-bottom: 30px;
        }
        .box-bottom{
          display: flex;
          flex-flow: column;
          align-items: center;
          & p{
            font-size: 16px;
            margin-bottom: 0;
          }
          & p:first-child{
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 15px;
          }
        }
      }
    }
  }
}
.contact-us{
  text-align: center;
  width: 100%;
  min-width: 1380px;
  margin-top: 320px;
  .contact-title{
    color: #6666FF;
    font-size: 28px;
    padding-bottom: 10px;
  }
  .contact-stitle{
    font-size: 26px;
    color: #333333;
    padding-bottom: 40px;
  }
  .contact-btn-box{
    .contact-btn{
      padding: 10px 16px;
      font-size: 14px;
      color: #6666FF;
      border-radius: 5px;
      cursor: pointer;
      box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.16);
      &.active{
        background-color: #6666FF;
        color: #ffffff;
        margin-right: 60px;
      }
    }
  }
}
</style>